<template>
  <div>
    <el-card class="box-card" :body-style="{padding:'5px'}">
      <div class="clearfix" style="padding:5px;">
        <span style="line-height: 36px;">详情</span>
      </div>

      <el-form ref="form" :model="form" label-width="120px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="组合代码:" prop='combinationCode'>
              <el-select v-model="form.combinationCode" placeholder="请选择" style='width: 100%'
                         :disabled="this.pageModel === 'EDIT'">
                <el-option
                  v-for="item in getAllcombinations"
                  :label="item.combinationCode"
                  :value="item.combinationCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="组合名称:" prop='combinationName'>
              <el-select v-model="form.combinationName" placeholder="请选择" style='width: 100%'
                         :disabled="this.pageModel === 'EDIT'">
                <el-option
                  v-for="item in getAllcombinations"
                  :label="item.combinationName"
                  :value="item.combinationName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="调仓开始" prop="beginDate">
              <el-date-picker
                style="width:100%"
                v-model="form.beginDate"
                type="datetime"
                placeholder="选择日期时间"
                :disabled="disableForm">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="调仓结束" prop="endDate">
              <el-date-picker
                style="width:100%"
                v-model="form.endDate"
                type="datetime"
                placeholder="选择日期时间"
                :disabled="disableForm">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="调仓原因" prop="transferReason">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}"
                        v-model="form.transferReason" placeholder="输入原因" :maxlength='400' :disabled="disableForm"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="调仓内容" prop="transferContent">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}"
                        v-model="form.transferContent" placeholder="输入原因" :maxlength='400' :disabled="disableForm"/>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item>
          <el-button type="info" @click="saveHandler" :disabled="disableForm">保存</el-button>
          <el-button type="danger" @click="resetHandler" :disabled="disableForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<script type="text/babel">
  import assignDeep from 'assign-deep'
  import {mapActions} from 'vuex'

  import wareHouseStore from './bll/wareHouseStore'
  import store from '../../store'
  import dateUtil from '../../common/dateUtil'

  (!store.state.wareHouseStore) && store.registerModule('wareHouseStore', wareHouseStore)

  export default {
    data() {
      return {
        disableForm: true,
        pageModel: 'EDIT',
        form: {
          combinationCode: '',
          combinationName: '',
          beginDate: '',
          endDate: '',
          transferReason: '',
          transferContent: '',
          warehouseId: ''
        }
      }
    },

    props: {
      param: {
        type: Object
      },
      mode: {
        type: String
      }
    },

    computed: {
      getAllcombinations() {
        return this.$store.state.wareHouseStore.combinationsList;
      }
    },

    watch: {
      param(record) {
        if (record) {
          this.form.combinationCode = record.combinationCode;
          this.form.combinationName = record.combinationName;
          this.form.beginDate = record.beginDate;
          this.form.endDate = record.endDate;
          this.form.transferReason = record.transferReason;
          this.form.transferContent = record.transferContent;
          this.form.warehouseId = record.warehouseId;
        } else {
          assignDeep(this.form, {
            combinationCode: '',
            combinationName: '',
            beginDate: '',
            endDate: '',
            transferReason: '',
            transferContent: '',
            warehouseId: ''
          });
        }
      },
      mode(val) {
        this.pageModel = val;
      }
    },

    mounted() {
      this.initPage();
    },

    methods: {
      ...mapActions(['addTransfers', 'editTransfers', 'querycombinationsList']),
      saveHandler() {
        var newform = this.form
        console.log(this.form)
        if (typeof newform.beginDate === 'object') {
          newform.beginDate = dateUtil.getDateTime(newform.beginDate);
        }
        if (typeof newform.endDate === 'object') {
          newform.endDate = dateUtil.getDateTime(newform.endDate);
        }
        console.log(newform)
        if (this.pageModel === 'ADD') {
          this.addTransfers({formData: newform}).then(() => {
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.$parent.initPage()
            this.disable()
            this.pageModel = 'EDIT'
          })
        } else {
          this.editTransfers({formData: newform}).then(() => {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.$parent.initPage()
            this.disable()
            this.pageModel = 'EDIT'
          })
        }

      },

      resetHandler() {
        console.log(this.$refs.form)
        this.$refs.form.resetFields();
        this.disableForm = true;
      },

      initPage() {
        this.querycombinationsList()
      },

      // interface for invoking

      disable() {
        this.disableForm = true;
      },
      enable() {
        this.disableForm = false;
      },
      clear() {
        this.$refs.form.resetFields();
      }

    }
  }
</script>

